<script setup lang="ts">
import type { ItemArray, categoryItem, hotItem } from '@/types/home'
import { ref } from 'vue'
import { getHomePic, getCategorize, getHot } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import Tabbar from './components/index.vue'
import categorize from './components/categorize.vue'
import hot from './components/hot.vue'
import Skeleton from './components/pageSkeleton.vue'
import { getGuess } from '@/composables/index'
//控制骨架屏显示
let isLoading = ref(false)
//刷新状态切换
let isRefresh = ref(false)
//存储轮播图
const slider = ref<ItemArray>([])
//存储分类数据
const categorizeData = ref<categoryItem>([])
//存储hot
const hotData = ref<hotItem>([])
//获取轮播图
const getBannerPic = async () => {
  const result = await getHomePic()
  //赋值
  slider.value = result.result
}
//获取分类数据
const getCategorizeData = async () => {
  const result = await getCategorize()
  //赋值
  categorizeData.value = result.result
}
//获取hot
const getHotData = async () => {
  const result = await getHot()
  //赋值
  hotData.value = result.result
}
//下拉回调
const onRefreshed = async () => {
  isRefresh.value = true
  //调用重置讨你喜欢数据
  guessRef.value?.resetGuessData()
  //重新获取轮播图，推荐，猜你喜欢数据
  await Promise.all([getBannerPic(), getCategorizeData(), getHotData()])
  //等待三个数据加载完毕后，关闭刷新状态
  isRefresh.value = false
}
//首页加载
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getBannerPic(), getCategorizeData(), getHotData()])
  isLoading.value = false
})
//获取猜你喜欢模块
const { guessRef, onScrolltolower } = getGuess()
</script>

<template>
  <Tabbar />

  <!-- 滚动区域 -->
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefreshed"
    @scrolltolower="onScrolltolower"
    :refresher-triggered="isRefresh"
    class="scroll-view"
    scroll-y
  >
    <!-- 骨架屏 -->
    <Skeleton v-if="isLoading" />
    <template v-else>
      <XtxSwiper :list="slider" />
      <categorize :classification="categorizeData" />
      <hot :hotPart="hotData" />
      <XtxGuess ref="guessRef" />
    </template>
  </scroll-view>
</template>

<style lang="scss">
//
page {
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  height: 100%;
  .scroll-view {
    flex: 1;
  }
}
</style>
